/* pages/home/home.wxss */
page {
  background-image: url('https://hand-in-hand-static.oss-rg-china-mainland.aliyuncs.com/home/background.png');
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: #f6f6f6;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  width: 100%;
  .location {
    position: absolute;
    left: 20rpx;
    font-size: 26rpx;
    color: #222;
    height: 56rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    background-color: #fff;
    border-radius: 28rpx;
    border: 1px solid #eee;
    image {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .filter {
    gap: 8rpx;
    font-weight: 500;
    font-size: 36rpx;
    color: #222;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.container {
  width: 100vw;
  height: auto;
  padding: 0 14rpx 180rpx;
  box-sizing: border-box;
}

.flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12rpx;
}

.filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 20000;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 20010;
  }
  .panel {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 85vh;
    background-color: #ffffff;
    z-index: 20020;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;

    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      flex-basis: 112rpx;
      width: 100%;
      flex-grow: 0;
      flex-shrink: 0;
      color: #222222;
      font-size: 36rpx;
      .close-icon {
        position: absolute;
        left: 40rpx;
        top: 40rpx;
        width: 28rpx;
        height: 28rpx;
      }
    }

    .main {
      width: 100%;
      flex-grow: 1;
      padding: 0 40rpx;
      box-sizing: border-box;
      overflow: scroll;

      // 性别选择区域
      .gender {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20rpx;
        .gender-radio {
          display: flex;
          align-items: center;
          height: 72rpx;
          font-size: 28rpx;
          background-color: #ffffff;
          color: #222222;
          border: 1px solid #eeeeee;
          border-radius: 36rpx;
          box-sizing: border-box;
          padding: 0 30rpx;
          gap: 8rpx;
          flex-shrink: 0;
          .icon {
            width: 32rpx;
            height: 32rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
          &.active {
            background-color: #ffcc00;
            color: #222;
            border: none;
          }
        }
      }


      .divider {
        width: 100%;
        height: 1px;
        margin: 32rpx 0;
        background-color: #f5f5f5;
      }

      .vip {
        width: 100%;
        margin: 32rpx 0;
        .title {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12rpx;
          font-size: 32rpx;
          color: #222;
          font-weight: 500;
          image {
            width: 52rpx;
            height: 28rpx;
          }
        }
  
        .radio-group {
          width: 100%;
          height: auto;
          margin: 32rpx 0;
          .radio-group-title {
            font-size: 24rpx;
            color: #222;
            font-weight: 500;
            margin-bottom: 16rpx;
          }
  
          .radio-button-wrapper {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 10rpx;
            .radio-button {
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 26rpx;
              color: #383b40;
              border-radius: 28rpx;
              background-color: #fff;
              box-sizing: border-box;
              border: 1px solid #eee;
              height: 56rpx;
              min-width: 160rpx;
              &.active {
                border-color: #40c05a;
                color: #40c05a;
              }
            }
          }
        }
      }

      .handle {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 136rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        gap: 30rpx;
        padding: 0 40rpx;
        background-color: #fff;
        .button {
          height: 88rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #666;
          background-color: #fff;
          border-radius: 48rpx;
          padding: 0 80rpx;
          box-sizing: border-box;
          border: 1px solid #eee;
          white-space:nowrap;
          &.primary {
            color: #fff;
            background-color: #58da73;
            border: none;
          }
        }
      }

    }


  }
}

.empty-status {
  margin-top: 100rpx;
  // width: calc(100% - 64rpx);
  width: 100%;
  height: 640rpx;
  border-radius: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  gap: 24rpx;
  
  .empty-icon {
    width: 320rpx;
    height: 320rpx;
  }

  .main-text {
    font-size: 32rpx;
    color: #666;
  }

  .sub-text {
    color: #999;
    font-size: 24rpx;
  }
}
